<template>
  <div class="example-top">
    <NavHeader />
    <div class="example-top-content">
      <h1>创新数据治理，赋能行业转型</h1>
      <h3>多行业应用广，案例精，信息智能方案强，展数字化风华</h3>
    </div>
  </div>
  <div class="home-example-box">
    <div
      class="home-example-box-itembox"
      v-for="(item, index) in exampleList"
      @click="godetailPage(index + 1)"
    >
      <div class="home-example-box-itembox-item">
        <div class="home-example-box-itembox-item-title">{{ item.title }}</div>
        <div class="home-example-box-itembox-item-desc">
          {{ item.desc.split("，")[0] }}
        </div>
      </div>
      <img :src="item.path" />
      <div class="home-example-box-itembox-desc">
        【{{ item.title }}】{{ item.desc }}
      </div>
    </div>
  </div>
  <BackTop />
  <pageBottom backColor="#f3f3f6" />
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, watch } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
import NavHeader from "@/components/NavHeader.vue";
import pageBottom from "@/components/pageBottom.vue";
import BackTop from "@/components/BackTop.vue";
import kq from "@/assets/img/example/hrkq.png";
import ai from "@/assets/img/example/aizs.png";
import sj from "@/assets/img/example/jtsj.png";
import cj from "@/assets/img/example/sjcj.png";
import zsj from "@/assets/img/example/sjgl.png";
import qx from "@/assets/img/example/sjqx.png";
let exampleList = reactive([
  {
    path: cj,
    title: "渠道数据采集",
    desc: "多渠道数据汇聚，精准采集助力决策",
  },
  {
    path: zsj,
    title: "主数据管理",
    desc: "统一主数据管理，提升数据准确性",
  },
  {
    path: qx,
    title: "渠道数据清洗",
    desc: "智能清洗渠道数据，确保数据纯净高效",
  },
  {
    path: ai,
    title: "企业AI助手",
    desc: "智能AI助手，助力企业高效办公",
  },
  {
    path: kq,
    title: "HR考勤数据汇总",
    desc: "实时汇总考勤数据，提升HR管理效率",
  },
  {
    path: sj,
    title: "集团审计管理",
    desc: "全流程审计管理，保障集团运营合规",
  },
]);
const godetailPage = (i: number) => {
  if (i == 1) {
    // 渠道数据采集
    router.push({
      name: "Exampleitem2",
    });
  } else if (i == 2) {
    // 渠道数据采集
    router.push({
      name: "Exampleitem",
    });
  } else if (i == 3) {
    // 渠道数据清洗
    router.push({
      name: "Exampleitem3",
    });
  } else if (i == 4) {
    // AI分析助手
    router.push({
      name: "Exampleitem4",
    });
  } else if (i == 5) {
    // HR考勤数据汇总
    router.push({
      name: "Exampleitem5",
    });
  } else if (i == 6) {
    // 集团审计管理
    router.push({
      name: "Exampleitem6",
    });
  }
};
</script>

<style lang="scss" scoped>
.example-top {
  background-image: url("@/assets/img/example/bg.png");
  background-size: 100% 100%;
  height: 70vh;
  background-repeat: no-repeat;
  position: relative;
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    // background-color: rgba(0, 0, 0, 0.4784313725);
  }
  &-content {
    position: absolute;
    margin-left: 18%;
    top: 45%;
    h1 {
      margin-bottom: 20px;
      font-weight: 700;
      font-size: 35px;
    }
  }
}
.home-example-box {
  background-color: #f3f3f6;
  width: 100%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  color: #000;
  padding: 50px 300px;
  &-itembox {
    // border-radius: 20px;
    width: 30%;
    margin: 40px 0;
    cursor: pointer;
    background-color: #fff;
    position: relative;
    transition: transform 0.3s ease-in-out;

    &:hover {
      transform: scale(1.1);
      cursor: pointer;
    }
    &-item {
      position: absolute;
      top: 12%;
      left: 7%;
      color: #fff;
      &-title {
        font-size: 24px;
        margin-bottom: 3px;
        font-weight: 700;
      }
      &-desc {
        font-size: 17px;
      }
    }
    img {
      width: 100%;
      height: 150px;
    }
    &-desc {
      width: 100%;
      padding: 30px;
      font-size: 24px;
    }
  }
}
</style>
